<template>
	<div>
		<span>全选:</span>
		<input type="checkbox" v-model="isAll"/>
		<button @click.prevent="res">反选</button>
		<ul>
			<li v-for="(ele,i) in arr" :key="i">
				<input type="checkbox"  v-model="ele.c"/>
				<span>{{ele.name}}</span>
			</li>
		</ul>
	</div>
</template>

<script>
// import { get } from 'http';

	// 目标: 小选框 -> 全选
	export default {
		data() {
			return {
				arr: [{
						name: "猪八戒",
						c: false,
					},
					{
						name: "孙悟空",
						c: false,
					},
					{
						name: "唐僧",
						c: false,
					},
					{
						name: "白龙马",
						c: false,
					},
				],
			};
		},
		methods:{
			res(){
				this.arr.forEach(ele=>ele.c=!ele.c)
			}
		},
		computed:{
			isAll:{
			get(){
				return this.arr.every(ele=>ele.c)
			},
			set(val){
				this.arr.forEach(ele=>ele.c=val)
			}
			}
		}
	};
</script>

<style>
</style>
